<!-- 插件主页 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>web_robot</title>
    <link rel="stylesheet" href="../css/materialize.min.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 300px;
            min-height: 200px;
        }

        .container {
            width: 100%;
            overflow-y: auto;
        }

        .collection {
            margin: 0;
        }

        /* cases_view start */
        .cases_view {
            overflow-y: auto;
            height: 380px;
        }

        .case-btn-wrapper {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px;
        }

        .btn-flat {
            border: solid 1px #ccc;
        }

        #modal1 .input-field {
            margin: 0;
        }

        /* cases_view ends */

        /* process_view start */
        #process_view {
            height: 380px;
            overflow-y: auto;
            max-width: 300px;
        }

        #process_view .add_btn {
            display: flex;
            justify-content: space-around;
            margin-top: 12px;
        }

        #new_process {
            height: 380px;
            position: relative;
        }

        .chose_tag {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1;
            background: white;
            height: 43px;
            display: flex;
            justify-content: space-between;
        }

        .chose_tag>.input-field {
            margin-top: 0;
            display: inline-block;
            flex: 1 1 auto;
        }

        .tag_select {
            overflow-y: auto;
        }

        #tag_list {
            margin-top: 0 !important;
        }

        #process_back {
            height: 42px;
            border-radius: 0;
        }

        .chose_class_id {
            height: 42px;
        }

        /* process_view ends */

        .row {
            margin-bottom: 0;
        }

        .h5 {
            font-size: 1.64rem;
            line-height: 110%;
            margin: 0.82rem 0 0.656rem 0;
        }

        .header {
            vertical-align: middle;
        }


        .modal-overlay {
            top: 0;
        }


        .collection-item {
            padding: 3px !important;
        }

        .sel_tag option {
            height: 10px;
        }

        .sel_tag {
            height: 40px;
        }

        .pc {
            width: 19%;
        }

        .add_btn>a {
            width: 30%;
            padding: 0px;
            text-align: center;
        }

        .crawler_process {
            margin: 20px !important;
        }

        .data_tr,
        .data_td {
            min-width: 60px;
            /* max-width: 100px; */
            word-break: break-all;
        }

        .crawler_data_table {
            border-top: solid 1px #000;
        }

        .dropdown-content {
            min-height: 300px;
        }
    </style>
</head>

<body>
    <section class="container">

        <!-- 主页 -->
        <div class="cases_view" id="case_view" style="display: block">
            <div class="shiwu">
                <table class="bordered centered">
                    <thead>
                        <tr>
                            <th>事务名</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="cases">
                    </tbody>
                </table>
                <div class="case-btn-wrapper">
                    <a class="waves-effect waves-teal btn-flat add_btn" href="#add-transaction-modal">添加事务</a>
                    <a class="waves-effect waves-teal btn-flat" href="#load-transaction-modal">导入事务</a>
                </div>
            </div>
            <div class="case-btn-wrapper">
                <div class="switch" style="margin-bottom: 10px;">
                    <label>
                        简单看板模式：关
                        <input type="checkbox" id="dashboard">
                        <span class="lever"></span>
                        开
                    </label>
                </div>
            </div>
            <div class="case-btn-wrapper" id="add_dashboard_case_view">
                <a class="waves-effect waves-teal btn-flat" id="add_dashboard_case">页面添加看板</a>
            </div>
            <div class="case-btn-wrapper">
                <a class="waves-effect waves-teal btn-flat" id="dashboard_switch">看板开关</a>
            </div>

            <div id="add-transaction-modal" class="modal modal-fixed-footer">
                <div class="modal-content">
                    <div class="input-field">
                        <input type="text" id="case_name_input">
                        <label for="case_name_input">事务名</label>
                    </div>
                    <div class="input-field">
                        <select id="select_case_type">
                            <option value="process" selected>流程事务</option>
                            <option value="monitor">监控事务</option>
                            <option value="paral_crawler">并发爬虫事务</option>
                            <option value="serial_crawler">线性爬虫事务</option>
                            <option value="sourcecode">源码事务</option>
                            <option value="control">受控事务</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#!" class="modal-action modal-close waves-effect waves-teal btn-flat" id="add_case">确认</a>
                </div>
            </div>

            <div id="load-transaction-modal" class="modal modal-fixed-footer">
                <div class="modal-content">
                    <div class="input-field">
                        <input type="text" id="inport_case_input" placeholder="导入事务">
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#!" class="modal-action modal-close waves-effect waves-teal btn-flat"
                        id="inport_case">确认</a>
                </div>
            </div>

            <div id="rename-case-modal" class="modal modal-fixed-footer">
                <div class="modal-content">
                    <div class="input-field">
                        <input type="text" id="new_case_name" placeholder="新事物名">
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#!" class="modal-action modal-close waves-effect waves-teal btn-flat"
                        id="input_new_case_name">确认</a>
                </div>
            </div>
        </div>

        <!-- 流程页 -->
        <div id="process_view" style="display: none;">
            <ul class="collection" id="process_list">
            </ul>
            <div class="add_btn">
                <a class="waves-effect waves-teal btn-flat" href="#" id="add_process">添加事件</a>
                <a class="waves-effect waves-teal btn-flat" href="#" id="case_back">返回主页</a>
            </div>
            <div class="add_btn">
                <a class="waves-effect waves-teal btn-flat" href="#" id="add_process_free">页面录制</a>
                <a class="waves-effect waves-teal btn-flat" href="#" id="end_process_free"
                    style="display: none">结束录制</a>
                <a class="waves-effect waves-teal btn-flat" href="#" id="add_process_web">页面添加事件</a>
            </div>
            <!-- <div class="add_btn">
                <a class="waves-effect waves-teal btn-flat" href="#" id="layout_process">流程定义与编排</a>
            </div> -->
        </div>

        <!-- 新增流程页 -->
        <div id="new_process" style="display: none">
            <div class="chose_tag">
                <div class="input-field" style="margin-top: 0px;">
                    <select class="sel_tag">
                        <option value="" disabled selected>选择标签/选择器</option>
                    </select>
                </div>
                <a class="waves-effect waves-teal btn-flat" href="#" id="process_back">返回</a>
            </div>
            <div class="tag_select">
                <div class="chose_class_id" style="display: none;">
                    <div class="input-field col s12" style="margin-top: 0px;">
                        <input class="query_selecter" type="text" placeholder="query selecter" />
                    </div>
                </div>
                <div class="collection" id="tag_list">
                </div>
            </div>
            <div class="chose_opera" style="display: none">
                <div class="input-field col s12" id="select_opera" style="margin-top: 0px">
                    <select id="sel_opera">
                    </select>
                </div>
                <div class="input-field col s12" id="set_value" style="display: none">
                    <input placeholder="设值/${自定义参数}" id="ssv" type="text">
                </div>
                <div class="input-field" id="set_value_parser" style="display: none;">
                    <select id="select_value_parser">
                        <option value="text_parser" selected>默认文本(无解析)</option>
                        <option value="html_parser">原始HTML(无解析)</option>
                        <option value="table_parser">表格JSON解析(选中全表格)</option>
                        <option value="list_parser">列表JSON解析(选中兄弟元素)</option>
                    </select>
                </div>
                <div class="input-field col s12" id="set_expression" style="display: none">
                    <input placeholder="表达式" id="expression" type="text">
                </div>
                <div class="input-field col s12">
                    <input id="num_wait" type="number" class="wait" value="0">
                    <label for="num_wait">执行前等待时间</label>
                </div>
                <div class="input-field col s12" 
                    style="display: none;margin-top: -10px;margin-bottom: 10px;" 
                    id="background_open_box">
                    <input type="checkbox" class="filled-in" id="background_open" />
                    <label for="background_open">后台打开</label>
                </div>
                <div class="input-field col s12" 
                    style="display: none;margin-top: -10px;margin-bottom: 10px;" 
                    id="system_message_box">
                    <input type="checkbox" class="filled-in" id="system_message" checked="checked" />
                    <label for="system_message">系统通知</label>
                </div>
                <div class="input-field col s12" style="margin-top: -10px;">
                    <input type="checkbox" class="filled-in" id="dom_check" />
                    <label for="dom_check">开启dom检查</label>
                </div>
                <div class="input-field col s12">
                    <a class="waves-effect waves-teal btn-flat" href="#" id="test_run">测试运行</a>
                    <a class="waves-effect waves-teal btn-flat" href="#" id="process_add">添加</a>
                </div>
            </div>
        </div>

        <!-- 爬虫配置页 -->
        <div id="crawler_view" style="display: none;">
            <div class="collection" style="border: none;">
                <a href="#!" class="collection-item crawler_process" id="crawler_init">初始化流程</a>
                <a href="#!" class="collection-item crawler_process" id="crawler_fetch">爬取数据流程</a>
                <a href="#!" class="collection-item crawler_process" id="crawler_next"
                    style="border-bottom: 1px solid #e0e0e0;">爬虫下一步流程</a>
            </div>
            <div class="input-field col s12">
                <input id="crawler_times" type="number" value="10">
                <label for="crawler_times">总共运行次数</label>
            </div>
            <div class="switch" style="margin-bottom: 30px;">
                <label>
                    发送数据：关
                    <input type="checkbox" id="send_data_cb">
                    <span class="lever"></span>
                    开
                </label>
            </div>
            <div id="send_config" style="display: none;">
                <div class="input-field col s12">
                    <input id="crawler_data_api" type="text" value="http://127.0.0.1:12580/crawler/">
                    <label for="crawler_data_api">数据发送API地址</label>
                </div>
                <div class="input-field col s12">
                    <input id="send_freq" type="number" value="1">
                    <label for="send_freq">每隔几轮发送一次</label>
                </div>
            </div>
            <div style="text-align: center;">
                <a class="waves-effect waves-teal btn-flat" href="#" id="crawler_submit">确认</a>
                <a class="waves-effect waves-teal btn-flat" href="#" id="crawler_back">返回</a>
            </div>
        </div>

        <!-- 并发爬虫 -->
        <div id="paral_crawler_view" style="display: none;">
            <div class="switch" style="margin-top: 10px; margin-bottom: 20px;">
                <label>
                    URL配置：自配
                    <input type="checkbox" id="paral_crawler_url_config">
                    <span class="lever"></span>
                    API地址
                </label>
            </div>
            <div class="input-field col s12" id="url_textarea_box">
                <textarea id="url_textarea" class="materialize-textarea"></textarea>
                <label for="url_textarea">批量url地址（一行一个) ,可批量配置如{0-10}</label>
            </div>
            <div class="input-field col s12" style="display: none;" id="paral_crawler_url_api_box">
                <input id="paral_crawler_url_api" type="text" value="http://127.0.0.1:12580/crawler/url/">
                <label for="paral_crawler_url_api">地址接收api地址</label>
            </div>
            <div style="margin-bottom: 40px;">
                <a href="#!" class="collection-item crawler_process" id="crawler_fetch">爬取数据流程</a>
            </div>
            <div class="input-field col s12">
                <input id="crawler_cc" type="number" value="3">
                <label for="crawler_cc">并发数</label>
            </div>
            <div class="switch" style="margin-bottom: 30px;">
                <label>
                    后台运行：关
                    <input type="checkbox" id="paral_crawler_bg_run">
                    <span class="lever"></span>
                    开
                </label>
            </div>
            <div class="switch" style="margin-bottom: 30px;">
                <label>
                    发送数据：关
                    <input type="checkbox" id="paral_crawler_send_data_cb">
                    <span class="lever"></span>
                    开
                </label>
            </div>
            <div id="paral_send_config" style="display: none;">
                <div class="input-field col s12">
                    <input id="paral_crawler_data_api" type="text" value="http://127.0.0.1:12580/crawler/">
                    <label for="paral_crawler_data_api">数据发送API地址</label>
                </div>
                <div class="input-field col s12">
                    <input id="paral_send_freq" type="number" value="1">
                    <label for="paral_send_freq">每隔几轮发送一次</label>
                </div>
            </div>
            <div style="text-align: center;">
                <a class="waves-effect waves-teal btn-flat" href="#" id="paral_crawler_submit">确认</a>
                <a class="waves-effect waves-teal btn-flat" href="#" id="crawler_back">返回</a>
            </div>
        </div>

        <!-- 爬虫数据页 -->
        <div id="crawler_data_view" style="display: none; max-width: 400px; max-height: 500px; overflow: scroll;">
            <div style="text-align: center;">
                <span><b>样例数据展示</b> </span>
                <a href="#" id="crawler_back">返回主页</a>
            </div>
            <table class="crawler_data_table striped">
            </table>
        </div>

        <!-- 源码事务配置页 -->
        <div id="sourcecode_view" style="display: none;">
            <div class="input-field col s12">
                <input id="sourcecode_url" type="text" value=".*">
                <label for="sourcecode_url">源码注入正则匹配地址</label>
            </div>
            <div class="input-field col s12">
                <textarea id="jssourcecode" class="materialize-textarea"></textarea>
                <label for="jssourcecode">原生js代码</label>
            </div>
            <a class="waves-effect waves-teal btn-flat" href="#" id="edit_source">修改代码</a>
            <a class="waves-effect waves-teal btn-flat source_back" href="#">返回主页</a>
        </div>

        <!-- 受控事务配置页 -->
        <div id="control_view" style="display: none;">
            <div class="input-field col s12">
                <input id="control_url" type="text">
                <label for="control_url">受控地址</label>
                <a class="waves-effect waves-teal btn-flat" href="#" id="edit_control_url">修改地址</a>
                <a class="waves-effect waves-teal btn-flat" href="#" id="record_opera">录制操作</a>
            </div>
        </div>

        <!-- 填写参数modal -->
        <div id="model3" class="modal">
            <div id="argv_input" class="row">
            </div>
            <a href="#" class="modal-action modal-close waves-effect waves-teal btn-flat" id="argv_submit"
                style="width: 100%; text-align: center;">确认</a>
        </div>

        <!-- 定时运行modal -->
        <div id="timer_run_model" class="modal modal-fixed-footer">
            <div class="modal-content">
                <div class="input-field">
                    <input type="text" id="timer_run_input">
                    <label for="timer_run_input">定时, 15:00/10m</label>
                </div>
                <div class="input-field" style="margin-top: -10px; margin-bottom: 20px;">
                    <input type="checkbox" class="filled-in" id="fail_rerun" checked="checked" />
                    <label for="fail_rerun">开启失败重试</label>
                </div>
                <div><b>提醒</b>：1. 定时运行需保证浏览器的开启</div>
                <div>2. 15:00 表示每天下午三点运行</div>
                <div>3. 5m 表示每隔5分钟运行，采用的定时轮询，具体会有出入</div>
                <div>4. 配置完定时运行后当天开始计时</div>
                <div>5. 设置为空时为取消定时</div>
                <div>6. dom检查失败进入重试，总共会尝试10次，每次相隔1分钟</div>
            </div>
            <div class="modal-footer">
                <a href="#!" class="modal-action modal-close waves-effect waves-teal btn-flat"
                    id="submit_timer_run">确认</a>
            </div>
        </div>

        <div id="monitor_view" style="display: none;">
            <div class="input-field col s12">
                <input id="monitor_url" type="text" value="">
                <label for="monitor_url">监控地址</label>
            </div>
            <div class="input-field col s12">
                <input id="monitor_selector" type="text">
                <label for="monitor_selector">监控节点：选择器</label>
            </div>
            <div id="monitor_tip">总共有 
                <span id="monitor_selector_nums">0</span> 个元素
                <br />
                <span>单节点监控：监控单个的变更</span>
                <br />
                <span>多节点监控：监控多个节点的增量变化</span>
                <br />
                <span>- 监控消息目前发送在前台的页面左上角，如没有请刷新当前页面/重新配置</span>
                <br />
            </div>
            <div style="text-align: center; margin-top: 10px">
                <a class="waves-effect waves-teal btn-flat" href="#" id="monitor_selector_test">测试</a>
                <a class="waves-effect waves-teal btn-flat" href="#" id="monitor_confirm">确认</a>
                <a class="waves-effect waves-teal btn-flat" href="#" id="monitor_back">返回</a>
            </div>
        </div>
    </section>
    <script type="text/javascript" src="../js/external/jquery.min.js "></script>
    <script type="text/javascript" src="../js/external/clipboard.min.js"></script>
    <script type="text/javascript" src="../js/external/materialize.min.js "></script>
    <script type="text/javascript" src="../js/popup.js "></script>
</body>

</html>